<template>
  <div class="default-container" :class="themeType" v-loading="loading">
    <el-container>
      <el-aside :class="isCollapse ? 'aside-small-width' : 'aside-big-width'">
        <div class="platform-info-view">
          <i class="el-icon-eleme"></i>
          <i class="iconfont icon-shang"></i>
          <div class="platform-info-title" v-show="!isCollapse">
            {{ $t('global.platform') }}
          </div>
        </div>
        <el-menu :default-active="defaultActiveIndex" :collapse="isCollapse" router :unique-opened="true">
          <div v-for="(permission, index) in permissionList" :key="index">
            <el-submenu :index="permission.router_path + ''" v-if="checkPerm(permission.code) && permission.children.length > 0">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span slot="title">{{ $t(permission.name) }}</span>
              </template>
              <el-menu-item-group>
                <div v-for="(item, index) in permission.children" :key="index">
                  <el-menu-item @click="activeMenu(item.router_path)" :index="item.router_path" v-if="checkPerm(item.code)">{{ $t(item.name) }}</el-menu-item>
                </div>
              </el-menu-item-group>
            </el-submenu>
            <!-- <el-submenu :index="permission.router_path" v-if="checkPerm(permission.code) && permission.children.length == 0">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span slot="title">{{ $t(permission.name) }}</span>
              </template>
            </el-submenu> -->
            <el-menu-item :index="permission.router_path" v-if="checkPerm(permission.code) && permission.children.length == 0">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span slot="title">{{ $t(permission.name) }}</span>
              </template>
            </el-menu-item>
          </div>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div style="flex: 1; display: flex; align-items: center">
            <div class="header-right-cell" @click="isCollapse = !isCollapse">
              <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
            </div>
            <div class="header-right-cell" @click="refreshData">
              <i class="el-icon-refresh-right"></i>
            </div>
            <div style="margin-left: 20px">{{ $t('global.system') }}</div>
          </div>
          <div class="header-right-info">
            <div class="header-right-cell">
              <i class="el-icon-bell"></i>
            </div>
            <div class="header-right-cell" @click="isScreenFull">
              <i class="el-icon-rank"></i>
            </div>
            <div class="header-right-cell" style="padding: 0 10px" @mouseover="mouseOver" @mouseleave="mouseLeave">
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  <img
                    class="user-header-img"
                    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic2.zhimg.com%2F50%2Fv2-a54b20d6a8e33939ac7272f082869e3f_hd.jpg&refer=http%3A%2F%2Fpic2.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637229861&t=248d4302f6355b9512c92fb127d6e8de"
                    alt=""
                  />
                  {{ userInfo.name }}
                  <i :class="isMouseIn ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="password">{{ $t('global.change_password') }}</el-dropdown-item>
                  <el-dropdown-item v-for="(item, index) in languageList" :key="index" :command="item.code"> {{ item.description }}</el-dropdown-item>
                  <el-dropdown-item command="default-theme">默认主题</el-dropdown-item>
                  <el-dropdown-item command="pink-theme">粉色主题</el-dropdown-item>
                  <el-dropdown-item command="logout">{{ $t('global.logout') }}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </el-header>
        <!-- <div class="breadcrumb-view">
          <div class="breadcrumb-title">{{ $t($route.meta.title) }}</div>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>{{ $t("global.home") }}</el-breadcrumb-item>
            <el-breadcrumb-item>{{ $t($route.meta.title) }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div> -->
        <el-main>
          <router-view></router-view>
        </el-main>
        <el-footer>Copyright © 2019 - 2020 kinpoway All rights reserved.</el-footer>
      </el-container>
    </el-container>

    <el-dialog :title="$t('global.change_password')" :close-on-click-modal="false" :visible.sync="passwordVisible" width="600px">
      <change-password @cancelView="cancelView"></change-password>
    </el-dialog>
  </div>
</template>

<script>
import screenfull from 'screenfull'
import { setPermission, checkPermission } from '@/common/utils/permission.js'
import { getMenuTreeListByRoleId } from '@/api/menuApi.js'
import { getCurrentUserInfo } from '@/api/systemApi.js'
import { logout } from '@/api/loginApi.js'
import { getLanguages } from '@/api/api.js'

export default {
  data() {
    return {
      defaultActiveIndex: '',
      loading: false,
      isCollapse: false,
      isMouseIn: false,
      passwordVisible: false,
      userInfo: {},
      permissionList: [
        {
          name: 'global.center',
          code: 'system',
          router_path: '/home/center',
          children: [],
        },
        {
          name: 'global.group_directory',
          code: 'system',
          router_path: '/home/group_directory',
          children: [],
        },
        {
          name: 'global.product_list',
          code: 'system',
          router_path: '/home/product_list',
          children: [],
        },
        {
          name: 'global.product_storage',
          code: 'system',
          router_path: '/home/product_storage',
          children: [],
        },
        {
          name: 'global.product_delivery',
          code: 'system',
          router_path: '/home/product_delivery',
          children: [],
        },
        {
          name: 'global.product_change',
          code: 'system',
          router_path: '/home/product_change',
          children: [],
        },
        {
          name: 'global.product_collaboration',
          code: 'system',
          children: [
            {
              name: 'global.demand',
              code: 'system',
              router_path: '/home/product_collaboration/demand',
            },
            {
              name: 'global.opinion',
              code: 'system',
              router_path: '/home/product_collaboration/opinion',
            },
          ],
        },
        {
          name: 'global.product_my',
          code: 'system',
          router_path: '/home/product_my',
          children: [],
        },
        {
          name: 'global.knowledge',
          code: 'system',
          router_path: '/home/knowledge',
          children: [
            {
              name: 'global.cooperative_partner',
              code: 'system',
              router_path: '/home/knowledge/cooperative_partner',
            },
            {
              name: 'global.government_procurement',
              code: 'system',
              router_path: '/home/knowledge/government_procurement',
            },
            {
              name: 'global.successful_cases',
              code: 'system',
              router_path: '/home/knowledge/successful_cases',
            },
          ],
        },
        {
          name: 'global.product_sale',
          code: 'system',
          router_path: '/home/product_sale',
          children: [],
        },
        {
          name: 'global.white_list',
          code: 'system',
          router_path: '/home/white_list',
          children: [],
        },
        {
          name: 'global.organization',
          code: 'system',
          router_path: '/home/organization',
          children: [],
        },
        {
          name: 'global.system',
          code: 'system',
          children: [
            {
              name: 'global.users',
              code: 'mgr',
              router_path: '/home/user_management',
            },
            {
              name: 'global.roles',
              code: 'role',
              router_path: '/home/role_management',
            },
            {
              name: 'global.depts',
              code: 'dept',
              router_path: '/home/dept_management',
            },
            {
              name: 'global.posts',
              code: 'mgr',
              router_path: '/home/position_management',
            },
            {
              name: 'global.dict_type',
              code: 'dict',
              router_path: '/home/dict_management',
            },
            {
              name: 'global.menus',
              code: 'menu',
              router_path: '/home/menu_management',
            },
            {
              name: 'global.login_log',
              code: 'loginLog',
              router_path: '/home/login_log',
            },
            {
              name: 'global.business_log',
              code: 'log',
              router_path: '/home/business_log',
            },
            {
              name: 'global.messages',
              code: 'notice',
              router_path: '/home/notice_management',
            },
            {
              name: 'global.tenants',
              code: 'tenant_info',
              router_path: '/home/tenant_management',
            },
          ],
        },
        {
          name: 'global.translation',
          code: 'TRANSLATION',
          router_path: '/home/translation',
          children: [],
        },
      ],
      languageList: [],
      themeType: 'default-theme',
    }
  },
  components: {
    changePassword: () => import('./change_password.vue'),
  },
  created() {
    let path = window.sessionStorage.getItem('activeMenu')
    this.defaultActiveIndex = path
    this.themeType = localStorage.getItem('themeType') || 'default-theme'
    this.userInfo = this.$storage.getItem('userInfo')
    this.getLanguagesInfo()
    // console.log(JSON.stringify(this.userInfo))
  },
  methods: {
    // 本地保存菜单激活项
    activeMenu(path) {
      window.sessionStorage.setItem('activeMenu', path)
      this.defaultActiveIndex = path
      console.log(this.defaultActiveIndex, '951')
    },
    isScreenFull() {
      // 判断是否支持
      if (!screenfull.enabled) {
        this.$message({
          message: '不支持全屏',
          type: 'warning',
        })
        return false
      }
      screenfull.toggle()
    },
    getLanguagesInfo() {
      getLanguages().then((res) => {
        this.languageList = res.data.data
      })
    },
    checkPerm(code) {
      return checkPermission(code)
    },
    getUserInfo() {
      //获取用户信息
      this.loading = true
      getCurrentUserInfo()
        .then((res) => {
          if (res.data.code == 200 && res.data.success) {
            this.$storage.setItem('userInfo', res.data.data)
            let roleIds = res.data.data.roleId.split(',')
            console.log(roleIds)
            this.getMenuTreeList(roleIds)
          } else {
            this.loading = false
            this.$message.error(res.data.message)
          }
        })
        .catch((e) => {
          this.loading = false
          this.$message.error(e.message)
        })
    },
    getMenuTreeList(roleIds) {
      //获取角色菜单列表
      var list = []
      roleIds.forEach((element) => {
        list.push(
          getMenuTreeListByRoleId({
            roleId: element,
          })
        )
      })
      Promise.all(list).then((result) => {
        console.log(result)
        let list = result.filter((res) => {
          return res != undefined
        })
        if (list.length > 0) {
          let permissionsList = setPermission(list)
          this.$storage.setItem('permissionsList', permissionsList)
          this.loading = false
          location.reload()
          // this.$router.push({
          //   path: "/home/user_management"
          // })
        } else {
          this.loading = false
          this.$message.error('获取权限失败，请联系管理人员')
        }
      })
    },
    refreshData() {
      //刷新当前页面
      this.getUserInfo()
    },
    mouseOver() {
      this.isMouseIn = true
    },
    mouseLeave() {
      this.isMouseIn = false
    },
    handleCommand(command) {
      switch (command) {
        case 'password': //修改密码
          this.passwordVisible = true
          break
        case 1:
          this.changelanguage('zh')
          break
        case 2:
          this.changelanguage('en')
          break
        case 'logout': //退出登录
          this.logoutUser()
          break
        default:
          this.themeType = command
          localStorage.setItem('themeType', this.themeType)
          break
      }
    },
    changelanguage(language) {
      //切换语言环境
      this.loading = true
      localStorage.setItem('lang', language) // 存到localStorage中
      this.$i18n.locale = language
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    logoutUser() {
      //退出登录
      this.$router.push({
        path: '/login',
      })
      // logout().then((res)=>{
      //   console.log(res)
      //   this.$router.push({
      //     path: "/login"
      //   })
      // }).catch((e)=>{})
    },
    cancelView() {
      this.passwordVisible = false
    },
  },
}
</script>

<style lang="scss" scoped>
.el-container {
  width: 100%;
  height: 100%;
}

.platform-info-view {
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;

  i {
    font-size: 20px;
  }

  .platform-info-title {
    margin-left: 10px;
  }
}

.el-aside {
  text-align: center;
}

.aside-big-width {
  width: 230px !important;
}

.aside-small-width {
  width: 55px !important;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;

  i {
    font-size: 24px;
  }

  .header-right-info {
    min-width: 200px;
    height: 100%;
    display: flex;
  }

  .header-right-cell {
    min-width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    i {
      margin-right: 0;
    }
  }

  .header-right-cell:hover {
    background: rgba($color: #f0f0f0, $alpha: 0.5);
  }

  .el-dropdown-link {
    display: flex;
    align-items: center;
  }

  .user-header-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 5px;
  }
}

.el-footer {
  display: flex;
  align-items: center;
  border-top: 1px solid #eee;
}
</style>
